<template>
    <el-card class="list">
        <template #header>
            <div class="nav">
                <div class="title">
                    方案列表
                </div>
                <div>
                    <el-button type="primary" size="mini" @click="emit('toAdd')">
                        新增
                    </el-button>
                </div>
            </div>
        </template>
        <div class="schemeList" :infinite-scroll-disabled="infiniteScrollDisabled" :infinite-scroll-immediate="false" v-infinite-scroll="load">
            <div class="item" :class="{active: shemeId ? item.ID == shemeId : index === 0}" v-for="(item, index) in schemeList" :key="item.ID" @click="itemClick(item)">
                <div class="name">
                    {{ item.name }}
                </div>
                <div>
                    <el-icon style="color: rgb(105, 136, 251);margin-right: 10px;" @click.stop="toEdit(item)"><EditPen /></el-icon>
                    <el-icon style="color: red" @click.stop="deleteList(item)"><Delete /></el-icon>
                </div>
            </div>
        </div>

    </el-card>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import {tplList, docDel} from '../api/req.js'
import { ElMessageBox, ElMessage } from 'element-plus'

const form = reactive({
    page: 1,
    pageSize: 10
})
const shemeId = ref('')
const emit = defineEmits(['getDetail','toEdit', 'toAdd'])
const schemeList = ref([])


const itemClick = (item) => {
    if (shemeId.value === item.ID) return
    shemeId.value = item.ID
    emit('getDetail', item.ID)
}

const toEdit = (item) => {
    console.log(item)
    emit('toEdit', item.ID)
}

onMounted(() => {
    getList()
})

const deleteList = (item) => {
    ElMessageBox.confirm(`确定删除方案「${item.name}」吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        docDel({id: item.ID}).then(res => {
            if (res.code === 0) {
                ElMessage({
                    type: 'success',
                    message: '删除成功!',
                })
                getList(true)
            }
        }) 
    })
}

const load = () => {

}

const infiniteScrollDisabled = ref(false)
const getList = async (flag) => {
    try {
        const res = await tplList(form)
        if (res.code === 0) {
            if (!schemeList.length) {
                let id = res?.data?.list[0].ID
                shemeId.value = id
                emit('getDetail', id)
            }
            if (flag) {
                schemeList.value = res?.data?.list;
            } else {
                if (res?.data?.list.length) {
                    schemeList.value = schemeList.value.concat(res?.data?.list);
                } else {
                    infiniteScrollDisabled.value = true;
                }
            }
            
        }
    } catch (error) {
        console.log(error)
    }
}
</script>

<style lang="scss" scoped>
.list {
    width: 300px;
    margin-right: 5px;
    display: flex;
    flex-direction: column;
    ::v-deep .el-card__body {
        flex: 1;
        overflow: auto;
        margin-top: 5px;
        padding: 5px;
    }
    ::v-deep .el-card__header {
        padding: 10px;
    }

    .nav {
        line-height: 32px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
    }
    .schemeList {
        overflow: auto;
        height: 100%;
        .item {
            display: flex;
            font-size: 14px;
            line-height: 40px;
            padding: 0 10px;
            border-radius: 3px;
            background-color: rgb(249, 250, 251);
            justify-content: space-between;
            margin-bottom: 5px;
            cursor: pointer;
            .name {
                flex: 1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .active {
            background-color: rgb(80, 117, 251);
            color: #fff !important;
            .el-icon {
                color: #fff !important;
            }
        }
    }
    .pointer {
        cursor: pointer;
    }
}
</style>